<template>
  <m-page>
    <!-- 我的账单 -->
    <m-header title="我的账单"></m-header>
    <div class="my_bill">
      <!-- 账单页头部区域 -->
      <div class="bill_header">
        <ynet-cell-item title="心意通信用卡（尾号1234）" no-border>
          <div slot="left" class="holder"></div>
        </ynet-cell-item>
        <div class="bill_header_content">
          <p class="bill_payable">剩余应还金额（元）</p>
          <p class="bill_money">
            <ynet-amount :value="3500" :precision="2" />
          </p>
          <p class="bill_date">截止还款日：02-26</p>
        </div>
        <div class="current_bill">
          本期账单：
          <ynet-amount :value="3500" :precision="2" class="current_amount" />
        </div>
      </div>
      <!-- 已出账、未出账tab选择栏 -->
      <div class="tabs_choose">
        <ynet-tab-bar v-model="choosed" :items="items" :ink-length="20"></ynet-tab-bar>
      </div>
      <!-- 账单主题区域 已出账 未出账 -->
      <!-- 已出账 -->
      <div v-if="choosed == '1'" class="out_of_bill">
        <!-- 如果有交易信息则显示账单信息 -->
        <div v-if="billdata.length>=1">
          <!-- 上期未还 -->
          <div class="notyet_apply">
            <ynet-cell-item title="上期未还" class="not_aplly"></ynet-cell-item>
            <ynet-cell-item title="上次未还金额" brief="心意通卡 尾号（1234）" class="notyet_apply_item">
              <div slot="right">
                +
                <ynet-amount :value="3000" has-separator :precision="2" />
              </div>
            </ynet-cell-item>
            <ynet-cell-item title="循环利息" brief="心意通卡 尾号（1234）" class="notyet_apply_item">
              <div slot="right">
                +
                <ynet-amount :value="50" has-separator :precision="2" />
              </div>
            </ynet-cell-item>
          </div>
          <!-- 已出账单信息 -->
          <div class="bill_info">
            <div class="bill_info_item" v-for="item in billdata" :key="item.PUR_DATE">
              <ynet-cell-item :title="item.PUR_DATE" class="not_aplly"></ynet-cell-item>
              <ynet-cell-item
                v-for="(element,index) in item.list"
                :key="index"
                :title="element.DESLINE1"
                :brief="element.DESLINE2+ '尾号（'+element.CARDEND+'）'"
                class="notyet_apply_item"
                @click="gotoDetail(item.PUR_DATE,element.ID)"
              >
                <div slot="right" :class="element.AMOUNT_FL === '-'? 'balck':''">
                  {{element.AMOUNT_FL}}
                  <ynet-amount :value="element.AMOUNT" has-separator :precision="2" />
                </div>
              </ynet-cell-item>
            </div>
          </div>
          <!-- 立即用款按钮 -->
          <div class="apply_btn">
            <ynet-button type="warning" @click="gotoRepayment()">立即还款</ynet-button>
          </div>
        </div>
        <!-- 如果没有交易信息则显示暂无信息 -->
        <div v-if="billdata.length === 0">
          <div class="noInfomation">
            <div class="img_box"></div>
            <p>本期无交易记录</p>
          </div>
        </div>
      </div>
      <!-- 未出账 -->
      <div v-if="choosed == '2'" class="no_bill">
        <!-- 如果有交易信息则显示账单信息 -->
        <div v-if="nobilldata.length>=1">
          <!-- 未出账单信息 -->
          <div class="bill_info">
            <div class="bill_info_item" v-for="item in nobilldata" :key="item.PUR_DATE">
              <ynet-cell-item :title="item.PUR_DATE" class="not_aplly"></ynet-cell-item>
              <ynet-cell-item
                v-for="(element,index) in item.list"
                :key="index"
                :title="element.DESLINE1"
                :brief="element.DESLINE2+ '尾号（'+element.CARDEND+'）'"
                class="notyet_apply_item"
                @click="gotonoDetail(item.PUR_DATE,element.ID)"
              >
                <div slot="right" :class="element.AMT_FLAG === '-'? 'balck':''">
                  {{element.AMT_FLAG}}
                  <ynet-amount :value="element.AMOUNT" has-separator :precision="2" />
                </div>
              </ynet-cell-item>
            </div>
          </div>
          <!-- 立即用款按钮 -->
          <div class="apply_btn">
            <ynet-button type="warning" @click="gotoRepayment()">立即还款</ynet-button>
          </div>
        </div>
        <!-- 没有交易信息则显示无交易信息 -->
        <div v-if="nobilldata.length === 0">
          <div class="noInfomation">
            <div class="img_box"></div>
            <p>本期无交易记录</p>
          </div>
        </div>
      </div>
    </div>
  </m-page>
</template>

<script>
import { FieldItem, CellItem, Amount, TabBar, Button } from "ynet-mobile";
import { goto } from "../utils/index"
export default {
  components: {
    [FieldItem.name]: FieldItem,
    [CellItem.name]: CellItem,
    [Amount.name]: Amount,
    [TabBar.name]: TabBar,
    [Button.name]: Button
  },
  data() {
    return {
      choosed: 1, // tab-bar选中的name值
      items: [
        // tab-bar标签名称
        { name: 1, label: "已出账单" },
        { name: 2, label: "未出账单" }
      ],
      // 已出账单信息
      billdata: [
        {
          PUR_DATE: "02月18日", //消费日期
          list: [
            {
              ID: 1,
              AMOUNT_FL: "-", //交易金额符号
              AMOUNT: "2100", //交易金额
              DESLINE1: "全额提前还款", //交易描述1
              DESLINE2: "心意通卡", //交易描述2
              CARDEND: "1234", //卡后4位
              TRANTYPE: "1" //交易类型  1 全额还款 2 手续费 3 自动还款手续费
            },
            {
              ID: 2,
              AMOUNT_FL: "-",
              AMOUNT: "100",
              DESLINE1: "自动还款20190110手续费",
              DESLINE2: "心意通卡",
              CARDEND: "1234",
              TRANTYPE: "3"
            },
            {
              ID: 3,
              AMOUNT_FL: "+",
              AMOUNT: "100",
              DESLINE1: "20190110手续费",
              DESLINE2: "心意通卡",
              CARDEND: "1234",
              TRANTYPE: "2"
            }
          ]
        },
        {
          PUR_DATE: "02月15日", //消费日期
          list: [
            {
              ID: 1,
              AMOUNT_FL: "-", //交易金额符号
              AMOUNT: "2000", //交易金额
              DESLINE1: "20190104本金到期", //交易描述1
              DESLINE2: "心意通卡", //交易描述2
              CARDEND: "1234", //卡后4位
              TRANTYPE: "4" //交易类型  1 全额还款 2 手续费 3 自动还款手续费 4 本金到期
            },
            {
              ID: 1,
              AMOUNT_FL: "-",
              AMOUNT: "100",
              DESLINE1: "20190104手续费",
              DESLINE2: "心意通卡",
              CARDEND: "1234",
              TRANTYPE: "2"
            }
          ]
        }
      ],
      // 未出账单信息
      nobilldata: [
        {
          PUR_DATE: "02月28日", //消费日期
          list: [
            {
              ID: 1,
              AMT_FLAG: "-", //交易金额符号
              AMOUNT: "2100", //交易金额
              DESLINE1: "20190408手续费", //交易描述1
              DESLINE2: "心意通卡", //交易描述2
              CARDEND: "1234", //卡后4位
              TRANTYPE: "2" //交易类型  1 全额还款 2 手续费 3 自动还款手续费 4 本金到期
            },
            {
              ID: 2,
              AMT_FLAG: "-",
              AMOUNT: "100",
              DESLINE1: "20190210手续费",
              DESLINE2: "心意通卡",
              CARDEND: "1234",
              TRANTYPE: "2"
            },
            {
              AMT_FLAG: "+",
              AMOUNT: "100",
              DESLINE1: "20190102本金到期",
              DESLINE2: "心意通卡",
              CARDEND: "1234",
              TRANTYPE: "4"
            }
          ]
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    //立即还款按钮
    //点击跳转至还款页面
    gotoRepayment() {
      goto("repayment_new_balance.html");
    },
    // 点击已出账单条目 跳转至当条交易详情页
    gotoDetail(time, id) {
      let detail = {};
      let params = {};
      for (let i = 0; i < this.billdata.length; i++) {
        if (time === this.billdata[i].PUR_DATE) {
          detail = this.billdata[i].list;
        }
      }
      for (let i = 0; i < detail.length; i++) {
        if (id === detail[i].ID) {
          params = detail[i];
        }
      }
      console.log(params);
      goto("bill_transaction_detail.html", params);
    },
    // 点击未出账单条目 跳转至当条交易详情页
    gotonoDetail(time, id) {
      let detail = {};
      let params = {};
      for (let i = 0; i < this.nobilldata.length; i++) {
        if (time === this.nobilldata[i].PUR_DATE) {
          detail = this.nobilldata[i].list;
        }
      }
      for (let i = 0; i < detail.length; i++) {
        if (id === detail[i].ID) {
          params = detail[i];
        }
      }
      console.log(params);
      goto("bill_transaction_detail.html", params);
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

